<template>
    <div class="main-container">
        <template v-if="userinfo">
            <img :src="userinfo.headimgurl"><br>
            昵称: {{userinfo.nickname}}<br>
            国家: {{userinfo.country}}<br>
        </template>

            <div id="container" style="width: 100%;height: 300px;"></div>
            {{location}}
            <hr>
            <div v-html="consoleView"></div>

    </div>
</template>

<script>
import wx from "weixin-js-sdk";
import { getWxLocation } from "@/libs/weixin";
import { mapGetters } from "vuex";
import { getLocation } from "@/libs/GaodeMap";

import { Button, Toast } from "vant";

let map, marker;

export default {
    name: "Main",
    components: {
        [Button.name]: Button,
        [Toast.name]: Toast
    },
    data() {
        return {
            position: null,
            consoleArray: [],
            consoleView: null,
            wxLocation: "113.3172,23.08331"
        };
    },

    computed: {
        ...mapGetters(["userinfo", "location"])
    },

    mounted: function() {
        this.$nextTick(function() {
            this.initMap(); //初始化地图
            getLocation(); //获取定位信息
            this.weixinShare(); //微信分享
        });
    },
    watch: {
        consoleArray(value) {
            console.log(JSON.stringify(value, false, "\t"));
            this.consoleView = JSON.stringify(
                ["调试信息===>", ...value],
                null,
                "<br>"
            );
        }
    },

    methods: {
        //初始化地图
        initMap() {
            let _this = this;
            map = new AMap.Map("container", {
                zoom: 18,
                resizeEnable: true //是否监控地图容器尺寸变化
            });
            map.on("complete", function() {
                _this.consoleArray.push("地图加载完成！");
                _this.consoleArray.push(_this.location.longitude);
                
                //高德定位
                _this.geolocation();

                //通过微信获取坐标后，在进行标记
                /* const toast = Toast.loading({
                    duration: 0,       // 持续展示 toast
                    forbidClick: false, // 禁用背景点击
                    loadingType: 'spinner',
                    message: '正在定位'
                });

                //检测是否已获取地理位置
                let lng = _this.location.longitude
                const timer = setInterval(() => {
                    if(null != lng) {
                        _this.setMapMarker();
                        clearInterval(timer);
                        toast.clear();
                    } else {
                        lng = _this.location.longitude
                        _this.consoleArray.push(lng);
                    }
                }, 500) */
                
            });
        },
        //定位
        geolocation() {
            let _this = this
            AMap.plugin("AMap.Geolocation", function() {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, //是否使用高精度定位，默认:true
                    timeout: 10000, //超过10秒后停止定位，默认：5s
                    buttonPosition: "RB", //定位按钮的停靠位置
                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
                });
                
                geolocation.getCurrentPosition(function(status, result) {
                    if (status == "complete") {
                        console.log("complete",result)
                        _this.info = JSON.stringify(result)

                        //先删除标记点
                        if (marker) {
                            map.remove(marker);
                        }
                        // 创建一个 Marker 实例：
                        marker = new AMap.Marker({
                            position: result.position,
                            zIndex: 11100
                        });
                        map.remove(marker);
                        // 将创建的点标记添加到已有的地图实例：
                        marker.setMap(map);

                    } else {
                        console.log("error",result)
                        _this.info = JSON.stringify(result)
                    }
                });

                map.addControl(geolocation);
            });
        },
        // 设置地图中心点及标记
        setMapMarker() {
            const position = [this.location.longitude, this.location.latitude];
            //设置地图中心点
            map.setCenter(position);
            // 创建一个 Marker 实例：
            let marker = new AMap.Marker({
                position: position,
                zIndex: 11100
            });
            // 将创建的点标记添加到已有的地图实例：
            marker.setMap(map);
        },

        // 微信分享
        weixinShare() {
            wx.ready(() => {
                let link = window.location.href;

                wx.onMenuShareTimeline({
                    title: "首页", // 分享标题
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "https://www.baidu.com/img/baidu_jgylogo3.gif", // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });

                wx.onMenuShareAppMessage({
                    title: "首页", // 分享标题
                    desc:
                        "分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致", // 分享描述
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "https://www.baidu.com/img/baidu_jgylogo3.gif", // 分享图标
                    type: "", // 分享类型,music、video或link，不填默认为link
                    dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>